<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				text-align: center;
				margin-top: 30px;
				transform-style:preserve-3d;
				perspective: 1000px;
			}
			div{
				display: inline-block;
				width: 300px;
				height: 200px;
				position: absolute;
				margin: 0 auto;
				background-color:#DA0D25;
			}
			div>img{
				width: 100%;
				height: 100%;
				
			}
			/*从位置1到位置2的动画*/
			@keyframes first{
				from{
					transform-origin: 0 center;
					transform: translateX(150px) rotateY(60deg) translateZ(-400px) translateY(40px);
					
				}
				to{
					transform-origin: 0 center;
					transform: translateX(30px) rotateY(60deg) translateZ(-150px) translateY(20px);						
				}
			}
			/*从位置2到位置3的动画*/
			@keyframes secound{
				from{
					transform-origin: 0 center;
					transform: translateX(30px) rotateY(60deg) translateZ(-150px) translateY(20px);						
				}
				to{
					transform-origin: 0 center;
					transform: translateX(0) rotateY(0) translateZ(0) translateY(0);							
				}
			}
			/*位置3到位置4的动画*/
			@keyframes third{
				from{
					transform-origin: 100% center;
					transform: translateX(0) rotateY(0) translateZ(0) translateY(0);							
					
				}
				to{
					transform-origin: 100% center;
					transform: translateX(0) rotateY(-60deg) translateZ(-150px) translateY(20px);
					
				}
			}
			/*位置4到位置5的动画*/
			@keyframes fourth{
				from{
					transform-origin: 100% center;
					transform:  translateX(0) rotateY(-60deg) translateZ(-150px) translateY(20px);
				}
				to{
					transform-origin: 100% center;
					transform: translateX(-60px) rotateY(-60deg) translateZ(-400px) translateY(40px);
				}
			}
			/*从位置5到位置1的动画*/
			@keyframes fifth{
				0%{
					transform-origin: 100% center;
					transform: translateX(-60px) rotateY(-60deg) translateZ(-400px) translateY(40px);
				}
				50%{
					transform-origin: 100% center;
					transform: translateX(0) rotateY(0) translateZ(-400px) translateY(40px);
				}
				51%{
					transform-origin: 0 center;
					transform: translateX(0) rotateY(0) translateZ(-400px) translateY(40px);
				}
				100%{
					transform-origin: 0 center;
					transform: translateX(150px) rotateY(60deg) translateZ(-400px) translateY(40px);
				}
			}
			/*div:nth-child(1){
				transform-origin: 0 center;
				transform: translateX(150px) rotateY(60deg) translateZ(-400px) translateY(40px);
				opacity: 0.7;
				animation: first 2s linear forwards;
			}
			div:nth-child(2){
				transform-origin: 0 center;
				transform: translateX(30px) rotateY(60deg) translateZ(-150px) translateY(20px);
				opacity: 0.7;
				animation: secound 2s linear forwards;
				
			}
			div:nth-child(3){
				transform: translateX(0) rotateY(0) translateZ(0) translateY(0);							
				animation: third 2s linear forwards;
				opacity：1;
			}
			div:nth-child(4){
				transform-origin: 100% center;
				transform: translateX(0) rotateY(-60deg) translateZ(-150px) translateY(20px);
				animation: fourth 2s linear forwards;
				opacity: 0.7;	
			}
			div:nth-child(5){
				transform-origin: 100% center;
				animation: fifth 2s linear forwards;
				transform: translateX(-60px) rotateY(-60deg) translateZ(-400px) translateY(40px);
				opacity: 0.7;
			}*/
			
		</style>
	</head>
	<body>
		<div><img src="images/1.jpg"/></div>
		<div><img src="images/2 .jpg"/></div>
		<div><img src="images/3.jpg"/></div>
		<div><img src="images/4.jpg"/></div>
		<div><img src="images/5.jpg"/></div>
		
		<script type="text/javascript">
		// 图形变换位置时所需要拥有的属性
		var transformOringin = ['0% center','0% center','0% center','100% center','100% center'];
		var transform = ['translateX(150px) rotateY(60deg) translateZ(-400px) translateY(40px)',
						'translateX(30px) rotateY(60deg) translateZ(-150px) translateY(20px)','',
						'rotateY(-60deg) translateZ(-150px) translateY(20px)',
						'translateX(-60px) rotateY(-60deg) translateZ(-400px) translateY(40px)'];
		var opacity = ['0.5','1','0.5','0.5','0.5']
		var animation = ['first 0.5s linear forwards','secound 0.5s linear forwards','third 0.5s linear forwards',
						'fourth 0.5s linear forwards','fifth 0.5s linear forwards']
			var divs = document.querySelectorAll('div');
			// 执行一次动画
			change();
			// 定时器5s执行一次动画
			setInterval(function(){
				// 改变数组的值
				transform = changeArray(transform);
				transformOringin = changeArray(transformOringin);
				animation = changeArray(animation);
				opacity = changeArray(opacity);
				// 执行动画
				change();
			},5000)
			// 将数组的第一个值取出放入数组的最后位置
			function changeArray(bgcolor){
				// 取出数组的第二到最后一个元素形成新的数组
				var a = bgcolor.slice(1,bgcolor.length)
				// 获取数组第一个元素并将其转化为一个数组
				var b = [bgcolor.shift()];
				// 数组拼接形成新的数组
				return a.concat(b);
			}
			//将几个数组的对应的属性值值赋值给对应的div标签
			function change(){
				for (var i = 0; i < divs.length; i++) {
					divs[i].style.transformOrigin = transformOringin[i];
					divs[i].style.transform  = transform[i];
					divs[i].style.opacity = opacity[i];
					divs[i].style.animation = animation[i];
				}
			}
		</script>
		
	</body>
</html>
